

class Enlarge{
    constructor(el){
        this.el=document.querySelector(el)
        // 获取图片盒子
        this.img=this.el.querySelector('.img')
        // console.log(this.img);
        // 获取mask
        this.mask=this.el.querySelector('.mask')
        // console.log(this.mask);
        // 获取放大镜
        this.enlarge=this.el.querySelector('.enlarge')

        this.init()
    }
    init() {
        this.overandOut()
        this.mousemove()
        // this.tbEnlarge()
    }
}
// 鼠标移入移出
Enlarge.prototype.overandOut=function(){
   
    // 1.给图片绑定鼠标移入事件
    this.img.onmouseover=()=>{
        
        // 鼠标移入-mask和放大镜显示
        this.mask.style.display='block'
        this.enlarge.style.display='block'
    }
    // 2.给图片绑定鼠标移出事件
    this.img.onmouseout=()=>{
        // 鼠标移出图片,mask和放大镜都隐藏
        this.mask.style.display='none'
        this.enlarge.style.display='none'
    }
}

// 鼠标移动
Enlarge.prototype.mousemove=function(){
    // 1.给图片绑定鼠标移动事件
    this.img.onmousemove=(evt)=>{
        // 1.1获取事件对象
        this.e=evt||window.event
        // 1.2获取鼠标移动距离
        this.leftObj=this.e.pageX-this.el.offsetLeft-this.mask.offsetWidth/2
        this.topObj=this.e.pageY-this.el.offsetTop-this.mask.offsetHeight/2
        // 1.3限制范围
        if(this.leftObj<0) this.leftObj=0
        if(this.topObj<0) this.topObj=0
        // 最大移动范围
        this.maxLeft=this.img.offsetWidth-this.mask.offsetWidth
       this. maxTop=this.img.offsetHeight-this.mask.offsetHeight
        if(this.leftObj>this.maxLeft) this.leftObj=this.maxLeft
        if(this.topObj>this.maxTop) this.topObj=this.maxTop
        // 1.4同步mask和鼠标移动的距离
        this.mask.style.left=this.leftObj+'px'
        this.mask.style.top=this.topObj+'px'
        // 1.5同步放大镜
        this.tbEnlarge()


    }
}

// 同步放大镜
Enlarge.prototype.tbEnlarge=function(){
    this.enlarge.style.backgroundPosition=`-${this.leftObj*2}px -${this.topObj*2}px`
}

 export default Enlarge